import React from 'react';
function FunctionCounter(props){
	console.log('FunctionCounter')
	return <div>0</div>
}
//使用React.memo包装后的函数组件有1个特性，如果属性不变的时候 就不会重新渲染
const MemoFunctionCounter = React.memo(FunctionCounter);
function Counter() {
	const [count, setCount] = React.useState(0);
	console.log('count',count)
	//只有在依赖数组中的某个变量发生变化的时候才会重新计算得到新的回调函数，否则 会使用上一次的回调函数
	//在初次渲染的时候，肯定要把第一个参数赋给add
	//我们可以使用useCallback来包裹我们的函数，
	//useCallback第一个参数就是我们要记忆的函数，第2个参数是一个依赖变量的数组，里面包含了当这个值发生变化 的时候
	//需要重新创建函数的依赖
/* 	const add2 =() => {
		setCount(count + 1);
	} */
	const add = React.useCallback(() => {
		console.log('setCount');
		setCount(count=>count+1);
	},[]);
	return (
		<div>
			<p>{count}</p>
			<MemoFunctionCounter add={add}/>
			<button onClick={add}>+</button>
		</div>
	)
}

export default Counter;
